<% layout('/layout/default.html', {title: '社保信息', libs: ['dataGrid', 'jqueryDatePicker']}){ %>
<div class="main-content">
    <div class="card-header">
        <i class="fa fa-cubes"></i> 社保信息
        <div class="header-tools float-right">
            <a href="#" class="btn btn-default btn-sm" id="btnSearch" title="查询"><i class="fa fa-filter"></i> 查询</a>
            <% if(hasPermi('yili:yiliSocialSecurityInfo:edit')){ %>
            <!--				/yili/yiliSocialSecurityInfo/form?employeeId=${yiliSocialSecurityInfo.employeeId}-->
            <a href="javascript:void(0);" onclick="js_addRow();" class="btn btn-default btn-sm" title="新增社保信息"><i
                    class="fa fa-plus"></i> 新增</a>
            <% } %>
        </div>
    </div>
    <div class="container-fluid">
        <div class="card-body" style="padding: 0;">
            <#form:hidden path="id"/>
            <div class="row" style="margin: 0 0 0 0">
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <div class="form-group row">
                        <label class="col-form-label col-lg-4 col-md-4 text-right" title="">
                            员工编号：
                        </label>
                        <div class="col-lg-6 col-md-6" style="margin-top: 7px;">
                            ${yiliEmployee.code}
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <div class="form-group row">
                        <label class="col-form-label col-lg-4 col-md-4 text-right" title="">
                            员工姓名：
                        </label>
                        <div class="col-lg-6 col-md-6" style="margin-top: 7px;">
                            ${yiliEmployee.name}
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <div class="form-group row">
                        <label class="col-form-label col-lg-4 col-md-4 text-right" title="">
                            性别：
                        </label>
                        <div class="col-lg-6 col-md-6" style="margin-top: 7px;">
                            <% var gender = @DictUtils.getDictLabel(yiliEmployee.gender, "sex", ""); %>
                            ${gender}
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" style="margin: 0 0 0 0">

                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <div class="form-group row">
                        <label class="col-form-label col-lg-4 col-md-4 text-right" title="">
                            出生日期：
                        </label>
                        <div class="col-lg-6 col-md-6" style="margin-top: 7px;">
                            ${yiliEmployee.birthday,dateFormat="yyyy-MM-dd"}
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <div class="form-group row">
                        <label class="col-form-label col-lg-4 col-md-4 text-right" title="">
                            年龄：
                        </label>
                        <div class="col-lg-6 col-md-6" style="margin-top: 7px;">
                            ${yiliEmployee.age}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <form id="searchForm" action="${ctx}/yili/yiliSocialSecurityInfo/listData" method="post"
              class="form-inline d-none">
            <input type="hidden" name="employeeId" value="${yiliSocialSecurityInfo.employeeId}"/>
            <div class="form-group">
                <label class="control-label">缴费期间：</label>
                <div class="control-inline">
                    <input name="paymentPeriod" maxlength="64" class="form-control form-control-sm" readonly="readonly"
                           onclick="WdatePicker({dateFmt:'yyyy-MM', isShowToday: false, isShowClear:false});"/>
                </div>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-success btn-sm">查询</button>
                <button type="reset" class="btn btn-default btn-sm">重置</button>
            </div>
        </form>
        <table id="dataGrid"></table>
        <div id="dataGridPage"></div>
    </div>
</div>
<% } %>
<style type="text/css">
    .ui-datepicker-calendar {
        display: none;
    }
</style>
<script>
    //初始化DataGrid对象
    $('#dataGrid').dataGrid({
        searchForm: $("#searchForm"),
        columnModel: [
            {header: '社保类型', name: 'type', index: 'a.type', width: 90, align: "center", editable: true, edittype: 'select',
                editoptions: {value: "0:养老保险;1:医疗保险;2:失业保险;3:工伤保险;4:生育保险;5:住房公积金"},
                formatter: function (val, obj, row, act) {
                    return js.transDictLabel(${@DictUtils.getDictListJson('social_security_type')}, val, '未知');
                }
            },
            {header: '缴费期间', name: 'paymentPeriod', index: 'a.payment_period', width: 90, align: "center", editable: true, sorttype: "date", formatter: "date",
                formatoptions: {srcformat: 'Y-m-d H:i:s', newformat: 'Y-m'}
            },
            {header: '个人缴费金额', name: 'paymentAmount', index: 'a.payment_amount', width: 90, align: "center", editable: true },
            {header: '操作', name: 'actions', width: 100, sortable: false, title: false, align: "center",
				formatter: function (val, obj, row, act) {
                    var actions = [];
					<% if (hasPermi('yili:yiliSocialSecurityInfo:edit')) { %>
						actions.push('<a id="'+ row.id +'_actionEdit" href="javascript:void(0);" onclick="js_editRow(\'' + row.id + '\')" title="编辑社保信息"><i class="fas fa-pencil-alt"></i></a>&nbsp;');
						actions.push('<a href="${ctx}/yili/yiliSocialSecurityInfo/delete?id=' + row.id + '" class="btnList btnAddRow" title="删除社保信息" data-confirm="确认要删除该社保信息吗？"><i class="far fa-trash-alt"></i></a>&nbsp;');
					<% } %>
                    return actions.join('');
                }
            }
        ],
        // 加载成功后执行事件
        ajaxSuccess: function (data) {

        }
    });

    function js_addRow() {
        if ($('#dataGrid').find(".editable").length > 0) { //存在编辑状态的行
            js.showErrorMessage("存在未保存的数据，请操作完成后进行编辑！");
            return;
        }
        const dataRow = {
            "type": "",
            "paymentPeriod": "",
            "paymentAmount": ""
        };

        $('#dataGrid').jqGrid("addRowData", -1, dataRow, "first");
        js_editRow(-1);//新增一行之后，直接进入编辑状态

        // 新增的行绑定删除事件
        $('.btnAddRow').each(function () {
            var clickBinded = $(this).attr('data-click-binded');
			// 新增的行没有绑定过click事件，所以绑定delRowData的事件，已有的行jqgrid加载时绑定的删除确认框事件
            if (clickBinded == undefined) {
                // 防止重复绑定
                $(this).attr('data-click-binded', true);
                $(this).click(function () {
					$('#dataGrid').jqGrid("delRowData", -1); //删除当前行
					return false;
                });
                $(this).addClass("newAdd");
            }
        });

		$('.newAdd').before('<a href="javascript:void(0);" title="保存社保信息" onclick="saveIncomeParam(\''+ -1 + '\');"><i class="fa fa-check"></i></a>');
    }

    function js_editRow(rowid) {
        if ($('#dataGrid').find(".editable").length > 0) { //存在编辑状态的行
            js.showErrorMessage("存在未保存的数据，请操作完成后进行编辑！");
            return;
        }
        $('#dataGrid').jqGrid('editRow', rowid, true, pickdates); //开启该行的编辑

        $('#' + rowid + '_actionEdit').after('<a href="javascript:void(0);" title="保存社保信息" onclick="saveIncomeParam(\''+ rowid + '\');"><i class="fa fa-check"></i></a>');
    }

    function pickdates(id) {
        $('#' + id + '_paymentPeriod').datepicker({
            dateFormat: "yy-mm",
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            monthNamesShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            onClose: function (dateText, inst) {
                var month = $("#ui-datepicker-div .ui-datepicker-month option:selected").val();//得到选中的月份值
                var year = $("#ui-datepicker-div .ui-datepicker-year option:selected").val();//得到选中的年份值
                $('#' + id + '_paymentPeriod').val(year + '-' + (parseInt(month) + 1));//给input赋值，其中要对月值加1才是实际的月份
            }
        });
    }

    function saveIncomeParam(rowId) {
		//保存前的验证
        if (!js.isNum($("#" + rowId + "_paymentAmount").val())) {
            js.showErrorMessage("请输入正确的缴费金额");
            return;
        }
        if ($("#" + rowId + "_paymentPeriod").val().length == 0) {
			js.showErrorMessage("缴费期间不能为空");
			return;
		}
		if ($("#" + rowId + "_type").val().length == 0) {
			js.showErrorMessage("社保类型不能为空");
			return;
		}

        var parameter = {
            url: "save",
            mtype: "POST",
            extraparam: {
                employeeId: "${yiliEmployee.id}"
            },
            successfunc: function (data) {
                js.print(data);
                var result = $.parseJSON(data.responseText);
                //返回true会使用修改后的数据填充当前行，否则使用修改前的数据填充，同时关闭编辑模式
                if (data.status == 200 && result.result == 'true') {
                    js.showMessage("保存社保信息成功");
                    return true;
                } else {
                    js.showErrorMessage("保存社保信息失败");
                    return false;
                }
            }
        }
        //saveRow方法会把rowId行的数据作为参数调用parameter里面的请求
		$('#dataGrid').saveRow(rowId, parameter);
        page(); //重新加载表格
    }
</script>